<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
		<title>UI中国</title>
		<link rel="shortcut icon" href="img/logo.png">
	</head>

	<body>
		<div>
			<div class="header">
				<div class="navbar">
					<ul>
						<li>
							<a href="#"><img class="logo" src="img/logo.png" width="82%" /></a>
						</li>
						<li>
							<a href="#" class="navbar-item navbar-item-active">首页</a>
						</li>
						<li>
							<a href="#" class="navbar-item">发现&or;</a>
							<ul class="submenu">
								<li>作品</li>
								<li>文章</li>
								<li>设计大赛</li>
								<li>线下活动</li>
							</ul>
						</li>
						<li>
							<a href="#" class="navbar-item">学习&or;</a>
							<ul class="submenu">
								<li>教程</li>
								<li>专题</li>
								<li>书籍</li>
								<li>UTalk</li>
								<li>每周临摹</li>
							</ul>
						</li>
						<li>
							<a href="#" class="navbar-item">培训&or;</a>
							<ul class="submenu">
								<li>线下培训</li>
								<li>在线课程</li>
							</ul>
						</li>
						<li>
							<a href="#" class="navbar-item">招聘</a>
						</li>
						<li>
							<a href="#" class="navbar-item">话题</a>
						</li>
						<li>
							<a href="#" class="navbar-item">更多&or;</a>
							<ul class="submenu">
								<li>竞赛</li>
								<li>灵感</li>
								<li>工具</li>
								<li>主题学院</li>
							</ul>
						</li>
					</ul>
					<div class="right-nav">
						<div class="search">
							<img src="img/search.png" width="80%" class="search-logo" />
						</div>
						<div class="login-hd">
							<img src="img/user.png" width="30%" class="login-logo" />
							<a href="#" class="login">登录</a>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="waterfall-wrapper">
					<div class="waterfall" id="wf-content">
					</div>
				</div>
				<div class="page-num-wrapper">
					<div class="page-num-ct">
						<div class="page-num-ct-cl">
							<ul>
								<li><a href="#" class="page-num-ct-cl-item page-num-ct-cl-item-active">1</a></li>
								<li><a href="#" class="page-num-ct-cl-item">2</a></li>
								<li><a href="#" class="page-num-ct-cl-item">3</a></li>
								<li><a href="#" class="page-num-ct-cl-item page-num-ct-cl-item-other">&sdot;&sdot;&sdot;</a></li>
							</ul>							
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="ft-cl">
					<div class="logo">
						<img src="img/footer-logo.png" width="80%" />
					</div>
					<div class="ft-ct">
						<ul>
							<li><a href="#">商务合作</a></li>
							<li><a href="#">意见反馈</a></li>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">版权声明</a></li>
							<li><a href="#">官方QQ群</a></li>
						</ul><br>
						<p class="p-copy"><a href="#">京ICP备14007358号-1</a> / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN</p>
						<div class="ft-img-group">
							<a href="#"><img src="img/ft-wechat.png"></a>
							<a href="#"><img src="img/ft-webo.png"></a>
							<a href="#"><img src="img/ft-qq.png"></a>
							<a href="#"><img src="img/ft-security.png"></a>
							<a href="#"><img src="img/ft-id-confirm.png"></a>
						</div>
						<div class="ft-img">
							<img src="img/footer-img.png" alt="二维码" width="90px" height="90px" />
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>